
<template>
    <div class="store">
        <!-- 轮播图插件 -->
        <div class="h_swiper">
            <Swiper></Swiper>
        </div>
        <!-- 附近门店 -->
        <div class="st_list">
            <div class="st_title">附近门店</div>
            <div class="search_box">
                <div class="search">
                    <input class="input"  @change="change" :model="searchtext" type="text" placeholder="请输入店铺名称">  
                    <div class="iconfont iconsousuo s_icon" @click="search"></div>
                </div>
            </div>
            <div class="st_item" v-for="(item) in storeList" :key="item.id">
                <div class="st_descr" @click="map(item)">
                    <div class="st_name">{{item.storeName}}</div>
                    <div class="st_jvli"><div class="iconfont icondingwei"></div>{{item.distance}}km</div>
                </div>
                <div class="st_address">{{item.storeAddress}}</div>
            </div>
        </div>
    </div>
</template>

<script>
// import wx from 'weixin-js-sdk';
import wx from '@utils/wx'
import Swiper from "../atom/Swiper";
import { Api, Global, Util } from "@utils/global";
// import {wx} from "@utils/wx";
// import VConsole from 'vconsole/dist/vconsole.min.js';
// 会员权益
export default {
    name: 'store',
    components:{
        Swiper:Swiper
    },
    data () {
        return {
            storeList:[
                // {
                //     "contactWay":"18837999519",				
                //     "createTime":"2020-05-13 22:09:47",
                //     "createUser":null,
                //     "delFlag":false,
                //     "distance":1.0,							
                //     "district":"100",						
                //     "id":1,
                //     "latitude":34.620868,					
                //     "longitude":112.473161,					
                //     "storeAddress":"洛阳市洛龙区展览路广利街交叉口",		
                //     "storeName":"晞霖百货商行",				
                //     "updateTime":"2020-05-13 22:09:47",
                //     "updateUser":null
                // }
            ],
            searchtext:null,
            longitude:null,
            latitude:null
        }
    },
    mounted(){
        // let vConsole = new VConsole() // 初始化
        // this.init();
        this.getStoreList();
    },
    methods:{
        init(){
            let _code = Util.getUrlCode().code;
            console.log(_code)
            if(_code){
                Api.ajax({
                    key: "memberCenter",
                    type: "GET",
                    data:{
                        code:_code,
                        // code:'081QFPQg0H4Njt18v4Pg0olEQg0QFPQx',
                        state:'test'
                    }
                }).then(
                    res => {
                        if (!res) return;
                        this.getStoreList();
                        // console.log('res',res)
                        Util.storage.set('userInfo', res);
                    },
                    res => {
                    // console.log(res);
                    //
                    }
                );
            }else{
                // 获取code
                // console.log(Global.getAuthorizeUrl())
                // Global.getAuthorizeUrl();
                window.location.href = Global.getAuthorizeUrl();
            }
        },
        change(ev){
            this.searchtext = ev.target.value;
        },
        search(){
            let searchtext = this.searchtext;
            console.log(searchtext)
            this.storeList = [];
            Api.ajax({
                key: "getNearbyStoresList",
                type: "GET",
                data: {
                    district:'',
                    storeName:searchtext,
                    longitude:this.longitude,
                    latitude:this.latitude
                }
            }).then(
                res => {
                    // console.log(res)
                    this.storeList = res;
                },res => {
                    
                }  
            )
        },
        getStoreList(){ //获取门店
            var that = this;
            var _url = window.location.href;
            // var _url = "http://guoguanglin.cn";
            // alert(_url);
            Api.ajax({
                key: "getSignature",
                type: "GET",
                data: {
                    url:_url
                    // url:'http://guoguanglin.cn/'
                }
            }).then(res => {
                // console.log(res)
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: res.appId, // 必填，公众号的唯一标识
                    timestamp: res.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.nonceStr, // 必填，生成签名的随机串
                    signature: res.signature,// 必填，调用js签名，
                    jsApiList: ['checkJsApi', 'onMenuShareTimeline',
                            'onMenuShareAppMessage', 'getLocation', 'openLocation',
                            'hideOptionMenu','scanQRCode'] // 必填，需要使用的JS接口列表，这里只写支付的
                });
                wx.ready(function(){
                    // alert('进入地图！')
                    // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
                    wx.checkJsApi({
                        jsApiList : [ 'getNetworkType', 'previewImage','getLocation' ],
                        success : function(res) {
                            // alert('检查结果',res)
                            // 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                            if (res.checkResult.getLocation == false) {
                                alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                                return;
                            }
                        }
                    });
                    // wx.hideOptionMenu();
                    wx.getLocation({
                        type: 'wgs84',
                        success: function (res) {
                            // console.log('获取当前位置')
                            // alert('获取当前位置',res)                                
                            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                            var longitude = res.longitude ; // 经度，浮点数，范围为180 ~ -180。
                            that.latitude = latitude;
                            that.longitude = longitude;
                            Api.ajax({
                                key: "getNearbyStoresList",
                                type: "GET",
                                data: {
                                    district:'',
                                    storeName:'',
                                    longitude:longitude,
                                    latitude:latitude
                                }
                            }).then(
                                res => {
                                    // console.log(res)
                                    that.storeList = res;
                                },res => {
                                    
                                }  
                            )
                        },
                        cancel:function(res){
                            // alert('获取当前位置失败',res);

                            // console.log(res)
                        }
                    });
                })
            },res => {
                // console.log(res)
            });
        },
        map(item){
                // console.log(this.store)
                // this.redirect('map',{tab:2,longitude:this.store.longitude,latitude:this.store.latitude})
                var storeDetail = item;
                var that = this;
                var _url = window.location.href;
                // var _url = "http://guoguanglin.cn/store";
                Api.ajax({
                    key: "getSignature",
                    type: "GET",
                    data: {
                        url:_url
                    }
                }).then(res => {
                    // console.log(res)
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: res.appId, // 必填，公众号的唯一标识
                        timestamp: res.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.nonceStr, // 必填，生成签名的随机串
                        signature: res.signature,// 必填，调用js签名，
                        jsApiList: ['checkJsApi', 'onMenuShareTimeline',
                                'onMenuShareAppMessage', 'getLocation', 'openLocation',
                                'hideOptionMenu'] // 必填，需要使用的JS接口列表，这里只写支付的
                    });
                    wx.ready(function(){
                        wx.checkJsApi({
                            jsApiList : [ 'getNetworkType', 'previewImage' ],
                            success : function(res) {
                                // 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                                if (res.checkResult.getLocation == false) {
                                    alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                                    return;
                                }
                            }
                        });
                        wx.openLocation({
                            latitude: Number(storeDetail.latitude), // 纬度，浮点数，范围为90 ~ -90
                            longitude: Number(storeDetail.longitude), // 经度，浮点数，范围为180 ~ -180。
                            name: storeDetail.storeName, // 位置名
                            address: storeDetail.storeAddress, // 地址详情说明
                            scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
                            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                        });
                        wx.getLocation({
                            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                            success: function (res) {
                                that.setData({
                                    hasLocation:true,
                                    location:{
                                        latitude: res.latitude, // 纬度，浮点数，范围为90 ~ -90
                                        longitude: res.longitude, // 经度，浮点数，范围为180 ~ -180。
                                    }
                                })
                               
                            },
                            error:function(res){
                                console.log(res)
                            }
                        });
                    })
                    
                },res => {
                // console.log(res)
                });
               
            }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.store{
    padding: 0px 30px 50px;
    .h_swiper{
        width:690px;
        height: 380px;
        margin: 30px auto;
        .img{
            width: 690px !important;
            height: 380px;
        }
    }
    .st_list{
        .st_title{
            color: #ccb484;
            font-size: 30px;
            line-height: 62px;
        }
        .search_box{
            position: relative;
            padding: 20px 40px;
            height: 100px;
            .search{
                position: absolute;
                width: 600px;
                height: 75px;
                border-radius: 40px;
                background: #fff;
                .input{
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 100%;
                    height: 75px;
                    line-height: 75px;
                    color: #000;
                    padding: 0px 20px;
                }
                .s_icon{
                    position: absolute;
                    top: 11%;
                    right: 20px;
                    color: #aaa;
                }   
            }
        }
        .st_item{
            padding: 30px 0px;
            .st_descr{
                display: flex;
                justify-content: space-between;
                .st_name{
                    font-size: 28px;
                    color: #ececec;
                    line-height: 66px;
                }
                .st_jvli{
                    font-size: 26px;
                    color: #ccb484;
                    display: flex;
                    align-items: center;
                    .icondingwei{
                        color: #ccb484;
                        font-size: 26px;
                        margin-right: 10px;
                    }
                }
            }
            .st_address{
                font-size: 20px;
                color: #aaa;
            }
        }
    }
}
    
</style>
